<div #container class="container" (dblclick)="doubleclick()">

  <!-- Large -->
  <div *ngIf="size === 'large'" class="knob large">
    <svg class="scale" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px" y="0px" width="175.82px" height="144.94px" viewBox="0 0 175.82 144.94"
      style="enable-background:new 0 0 175.82 144.94;" xml:space="preserve">
      <defs>
      </defs>
      <g>
        <path d="M174.29,104.03l-2.13-0.57c0.95-5.1,1.47-10.35,1.47-15.72c0-5.37-0.52-10.62-1.47-15.72l2.13-0.57
 c0.99,5.28,1.54,10.72,1.54,16.29C175.82,93.31,175.28,98.75,174.29,104.03z M152.99,143.38c6.82-7.94,12.22-17.14,15.77-27.21
 l2.13,0.57c-3.66,10.44-9.26,19.98-16.34,28.19L152.99,143.38z M152.97,32.12l1.56-1.56c7.09,8.22,12.7,17.73,16.36,28.18
 l-2.13,0.57C165.2,49.24,159.79,40.06,152.97,32.12z M116.4,7.05l0.57-2.13c10.46,3.66,20,9.26,28.23,16.33l-1.56,1.55
 C135.69,16,126.49,10.6,116.4,7.05z M87.91,2.19c-5.38,0-10.65,0.5-15.75,1.45l-0.57-2.12C76.88,0.52,82.33,0,87.91,0
 s11.03,0.53,16.32,1.53l-0.57,2.13C98.56,2.7,93.29,2.19,87.91,2.19z M30.6,21.24C38.83,14.16,48.4,8.6,58.86,4.94l0.57,2.12
 c-10.08,3.55-19.31,8.92-27.27,15.73L30.6,21.24z M4.94,116.74l2.13-0.57c3.55,10.07,8.97,19.25,15.79,27.19l-1.56,1.55
 C14.21,136.71,8.6,127.19,4.94,116.74z M4.94,58.74C8.6,48.3,14.2,38.76,21.28,30.55l1.56,1.56c-6.82,7.94-12.22,17.14-15.77,27.21
 L4.94,58.74z M3.67,103.46l-2.13,0.57C0.54,98.75,0,93.31,0,87.74c0-5.57,0.54-11.01,1.54-16.29l2.13,0.57
 C2.72,77.12,2.2,82.37,2.2,87.74C2.2,93.11,2.72,98.36,3.67,103.46z" />
      </g>
    </svg>

    <div class="slot"></div>
    <div class="body"></div>
    <div class="cap">
      <div class="cap-body" [ngStyle]="largeCapBodyStyle"></div>
      <div class="indicator" [ngStyle]="largeCapIndicatorStyle">
        <svg class="inner-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
          y="0px" width="40px" height="40px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;"
          xml:space="preserve">

          <path
            d="M20.000,40.000 C8.954,40.000 -0.000,31.046 -0.000,20.000 C-0.000,10.324 6.871,2.255 16.000,0.402 L16.000,1.430 C7.429,3.268 1.000,10.880 1.000,20.000 C1.000,30.493 9.507,39.000 20.000,39.000 C30.493,39.000 39.000,30.493 39.000,20.000 C39.000,10.880 32.571,3.268 24.000,1.430 L24.000,0.402 C33.129,2.255 40.000,10.324 40.000,20.000 C40.000,31.046 31.046,40.000 20.000,40.000 Z" />
        </svg>
        <div class="pointer"></div>
      </div>
    </div>
  </div>

  <!-- Medium -->
  <div *ngIf="size === 'medium'" class="knob medium">
    <svg class="scale" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g>
        <path
          d="M54.284,51.455 L51.444,48.604 C55.520,43.875 58.000,37.732 58.000,31.000 C58.000,24.563 55.739,18.659 51.980,14.020 L52.000,14.000 L51.861,13.861 C46.909,7.841 39.404,4.000 31.000,4.000 C16.088,4.000 4.000,16.088 4.000,31.000 C4.000,37.751 6.494,43.907 10.589,48.641 L7.717,51.456 C2.917,45.996 -0.000,38.841 -0.000,31.000 C-0.000,13.879 13.879,-0.000 31.000,-0.000 C48.121,-0.000 62.000,13.879 62.000,31.000 C62.000,38.840 59.083,45.996 54.284,51.455 ZM9.080,52.921 C9.080,52.920 9.080,52.920 9.079,52.920 L9.080,52.921 ZM13.433,51.478 C18.157,55.534 24.285,58.000 31.000,58.000 C37.732,58.000 43.875,55.520 48.604,51.444 L51.455,54.284 C45.996,59.083 38.840,62.000 31.000,62.000 C23.160,62.000 16.005,59.084 10.546,54.284 L13.433,51.478 Z" />
      </g>
    </svg>
    <div class="slot"></div>
    <div class="body"></div>
    <div class="cap" [ngStyle]="mediumCapIndicatorStyle">
      <svg width="38px" height="38px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g>
          <path
            d="M19.000,38.000 C8.507,38.000 -0.000,29.493 -0.000,19.000 C-0.000,8.844 7.974,0.574 18.000,0.050 L18.000,13.000 C18.000,13.552 18.448,14.000 19.000,14.000 C19.552,14.000 20.000,13.552 20.000,13.000 L20.000,0.050 C30.026,0.574 38.000,8.844 38.000,19.000 C38.000,29.493 29.493,38.000 19.000,38.000 Z" />
        </g>
      </svg>
    </div>
  </div>

  <!-- Small -->
  <div *ngIf="size === 'small'" class="knob small">
    <svg class="scale" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      xml:space="preserve">
      <g>
        <path
          d="M33.46,32l-0.04-0.04C36.26,28.78,38,24.6,38,20c0-9.94-8.06-18-18-18S2,10.06,2,20c0,4.62,1.75,8.81,4.61,12l-0.28,0.26
      L6,32.61l-0.81,0.8C1.98,29.86,0,25.17,0,20C0,8.95,8.95,0,20,0s20,8.95,20,20c0,5.16-1.97,9.84-5.18,13.39L34,32.55" />
      </g>
    </svg>
    <div class="slot"></div>
    <div class="body"></div>

    <div class="cap" [ngStyle]="smallCapIndicatorStyle">
      <svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g>
          <path
            d="M12.000,24.000 C5.373,24.000 -0.000,18.627 -0.000,12.000 C-0.000,5.710 4.842,0.560 11.000,0.050 L11.000,6.000 C11.000,6.552 11.448,7.000 12.000,7.000 C12.552,7.000 13.000,6.552 13.000,6.000 L13.000,0.050 C19.158,0.560 24.000,5.710 24.000,12.000 C24.000,18.627 18.627,24.000 12.000,24.000 Z" />
        </g>
      </svg>
    </div>
  </div>
</div>